import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:largefriends/pages/lf_edit_profile/lf_manage_photos/lf_manage_photos_logic.dart';
import 'package:largefriends/res/lf_color.dart';
import 'package:largefriends/res/lf_double_ext.dart';
import 'package:largefriends/res/lf_fonts.dart';
import 'package:largefriends/res/lf_text_style.dart';
import 'package:largefriends/res/strings/lf_strings.dart';
import 'package:reorderable_grid_view/reorderable_grid_view.dart';

import '../../../entity/entities/lf_photo_entity.dart';
import '../../../utils/lf_scroll_behavior.dart';
import '../../../widgets/custom_cache_image.dart';
import 'lf_manage_photo_gallery/lf_manage_photo_gallery_logic.dart';

class LfPublicPhotoView extends StatefulWidget {
  const LfPublicPhotoView({Key? key}) : super(key: key);

  @override
  _LfPublicPhotoViewState createState() {
    return _LfPublicPhotoViewState();
  }
}

class _LfPublicPhotoViewState extends State<LfPublicPhotoView> {
  final LfManagePhotosLogic logic = Get.find();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LfManagePhotosLogic>(builder: (logic) {
      return CustomScrollView(
        slivers: [
          10.h.sliverBox,
          _tips().sliverBox,
          10.h.sliverBox,
          Padding(
            padding: EdgeInsets.only(
              left: 10.w,
              right: 10.w,
            ),
            child: ScrollConfiguration(
              behavior: LfScrollBehavior(),
              child: ReorderableGridView.count(
                onReorder: (int oldIndex, int newIndex) {
                  if (oldIndex == newIndex) {
                    return;
                  }
                  setState(() {
                    {
                      final photo = logic.publicPhotos.removeAt(oldIndex);
                      logic.publicPhotos.insert(newIndex, photo);
                    }
                  });
                  logic.sortPublicPhoto();
                },
                mainAxisSpacing: 10.w,
                crossAxisSpacing: 10.w,
                crossAxisCount: 3,
                footer: logic.publicPhotos.length < 26
                    ? [
                        InkWell(
                          ///最多26张
                          child: Container(
                            decoration: BoxDecoration(
                                color: color8F8F8F,
                                borderRadius: 10.r.radius),
                            child: Icon(
                              Icons.add,
                              color: colorFF007F,
                              size: 24.r,
                            ),
                          ),
                          onTap: () {
                            logic.addPublicPhotos();
                          },
                        )
                      ]
                    : [],
                shrinkWrap: true,
                children: _getItems(),
              ),
            ),
          ).sliverBox
        ],
      );
    });
  }

  List<Widget> _getItems() {
    if (logic.publicPhotos.isEmpty) {
      return [];
    } else {
      return logic.publicPhotos.map((photo) {
        return InkWell(
          key: ValueKey(photo.attachId),
          child: LayoutBuilder(builder: (context, constants) {
            return SizedBox(
              width: constants.maxWidth,
              height: constants.maxHeight,
              child: Stack(
                children: [
                  CustomCacheImage(
                    imageUrl: photo.url,
                    width: constants.maxWidth,
                    height: constants.maxHeight,
                    radius: 10.r,
                  ),
                  // photo.avatar
                  //     ? Align(
                  //         alignment: Alignment.bottomLeft,
                  //         child: Container(
                  //           padding: EdgeInsets.all(4.r),
                  //           decoration: BoxDecoration(
                  //               borderRadius: BorderRadius.only(
                  //                   bottomLeft: Radius.circular(10.r),
                  //                   topRight: Radius.circular(10.r)),
                  //               color: color210215),
                  //           child: Text(
                  //             strMain.tr.toUpperCase(),
                  //             style: lfTextStyle(
                  //                 sp: 12.sp,
                  //                 fontFamily: fontRegular,
                  //                 color: colorFEFEFE),
                  //           ),
                  //         ),
                  //       )
                  //     : 1.h.sbh,
                  _photoStateTip(photo),
                ],
              ),
            );
          }),
          onTap: () {
            toManagePhotoGallery(
                index: logic.publicPhotos.indexWhere(
                    (element) => element.attachId == photo.attachId));
          },
        );
      }).toList();
    }
  }

  Widget _photoStateTip(LfPhotoEntity photoEntity) {
    if (photoEntity.status == 1) {
      return 1.h.sbh;
    }
    return Align(
      alignment: Alignment.topRight,
      child: Container(
        padding: EdgeInsets.all(4.r),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(10.r),
                topRight: Radius.circular(10.r)),
            color: color210215),
        child: Text(
          strPending.tr,
          style: lfTextStyle(
              sp: 12.sp, fontFamily: fontRegular, color: colorFEFEFE),
        ),
      ),
    );
  }

  Widget _tips() {
    var tips = strHoldAndDragPhotoTip.tr;
    if (logic.publicPhotos.isEmpty) {
      tips = strPublicPhotoEmpty.tr;
    } else if (logic.publicPhotos.length == 1) {
      tips = strPublicPhotoNeedMore.tr;
    }

    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15.r)),
        color: color8F8F8F,
      ),
      padding: EdgeInsets.symmetric(horizontal: 15.r),
      margin: EdgeInsets.symmetric(horizontal: 15.r),
      height: 80.h,
      child: Row(
        children: [
          Icon(
            Icons.edit,
            size: 30.r,
            color: color514F62,
          ),
          10.w.sbw,
          Expanded(
              child: Text(
            tips,
            style: lfTextStyle(
                sp: 15.sp, fontFamily: fontRegular, color: color514F62),
          ))
        ],
      ),
    );
  }
}
